<template>
    <el-container style="height: 100vh;">

      <!-- 侧边栏 -->
      <el-aside width="220px" style="background: #f4f4f4; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);">
        <el-menu :default-active="activeMenu" @select="handleMenuSelect"
                 text-color="#333" active-text-color="#409eff" background-color="transparent">
          <el-menu-item index="1">
            <i class="el-icon-s-operation"></i>
            <!-- eslint-disable-next-line -->
            <span slot="title">交易列表</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-s-data"></i>
            <!-- eslint-disable-next-line -->
            <span slot="title">交易趋势</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-s-data"></i>
            <!-- eslint-disable-next-line -->
            <span slot="title">交易占比</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-s-data"></i>
            <!-- eslint-disable-next-line -->
            <span slot="title">全部数据</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <!-- 主体部分 -->
        <el-main style="background-color: #ffffff; color: #333; padding: 30px;">
          <div v-if="activeMenu === '1'">
            <h2 class="section-title">交易列表</h2>
            <DataList></DataList>
          </div>
          <div v-else-if="activeMenu === '2'">
            <h2 class="section-title">请输入您要查看的交易用户名</h2>
            <!-- ECharts 折线图表 -->
            <Chars />
          </div>
          <div v-else-if="activeMenu === '3'">
            <h2 class="section-title">请输入4个您想查询的交易用户</h2>
            <!-- ECharts 饼状图表 -->
            <Pie />
          </div>
          <div v-else-if="activeMenu === '4'">
            <h2 class="section-title">交易金额分布</h2>
            <!-- ECharts 饼状图表 -->
            <Histogram />
          </div>
        </el-main>

        <!-- 页脚 -->
        <el-footer style="text-align: center; background-color: #f4f4f4; color: #333; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);">
          以太坊交易系统 © 2024
        </el-footer>
      </el-container>
    </el-container>
</template>

<script setup>
import { ref } from 'vue';
import Chars from './Chars.vue';
import DataList from './DataList.vue';
import Pie from './Pie.vue';
import Histogram from './Histogram.vue';

// 用于存储当前选中的菜单项
const activeMenu = ref('1');

// 处理菜单项选择的回调函数
function handleMenuSelect(index) {
  activeMenu.value = index;
  if (index === '2') {
    // initChart(); // 初始化或更新 ECharts 图表
  }
}

</script>

<style scoped>
.el-menu-item {
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.el-menu-item:hover {
  background-color: rgba(64, 158, 255, 0.1);
}

.section-title {
  font-size: 24px;
  color: #409eff;
  margin-bottom: 20px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

p {
  color: #666;
  line-height: 1.6;
  font-size: 18px;
}

@media screen and (max-width: 768px) {
  .el-aside {
    width: 100px !important;
  }

  .el-menu-item span {
    display: none;
  }

  .el-menu-item i {
    font-size: 22px;
  }
}
</style>
